<template>
    <div>
        <div id="background2"></div>
        <div id="container">
            <el-card id="account_card_size">
                <div v-if="step === 1">
                    <div class="step-header">
                        <el-steps :active="0" finish-status="success" align-center>
                            <el-step title="身份验证"></el-step>
                            <el-step title="修改密码"></el-step>
                            <el-step title="完成"></el-step>
                        </el-steps>
                    </div>
                    <div class="account-line">
                        <el-input v-model="current_pwd" placeholder="请输入当前密码" show-password class="account-input"></el-input>
                    </div>
                    <el-button type="primary" v-on:click="validateCurrentPwd" class="account-button">立即验证</el-button>
                </div>
                <div v-if="step === 2">
                    <div class="step-header">
                        <el-steps :active="1" finish-status="success" align-center>
                            <el-step title="身份验证"></el-step>
                            <el-step title="修改密码"></el-step>
                            <el-step title="完成"></el-step>
                        </el-steps>
                    </div>
                    <div class="account-line">
                        <el-input v-model="pwd_change" placeholder="请输入新密码" show-password class="account-input"></el-input>
                        <span v-if="pwd_strength" :style="{ color: pwd_strength.color }">{{ pwd_strength.message }}</span>
                    </div>
                    <div class="account-line">
                        <el-input v-model="confirm_pwd_change" placeholder="请确认新密码" show-password class="account-input"></el-input>
                    </div>
                    <el-button type="primary" v-on:click="change_pwd" class="account-button">修改密码</el-button>
                </div>
                <div v-if="step === 3">
                    <div class="step-header">
                        <el-steps :active="3" finish-status="success" align-center>
                            <el-step title="身份验证"></el-step>
                            <el-step title="修改密码"></el-step>
                            <el-step title="完成"></el-step>
                        </el-steps>
                    </div>
                    <div class="success-message">
                        <el-icon><CheckCircle /></el-icon>
                        <p>密码修改成功</p>
                        <p>{{time_count}}秒后自动返回登录页面</p>
                    </div>
                </div>
                <el-button type="primary" id="account_back_button" v-on:click="back_main" v-if="step !== 3">返回</el-button>
            </el-card>
        </div>
    </div>
</template>

<script>
import { updateUserPassword } from '../api/edit/changeUserInfo';
import { login } from '../api/login';

export default {
    data() {
        return {
            step: 1,  // 当前步骤
            username: '',  // 当前登录的账户名
            accountname: '',  // 当前登录的用户名
            current_pwd: '', // 当前密码输入
            pwd_change: '',  // 修改后的新密码
            confirm_pwd_change: '',  // 确认修改后的新密码
            user_id: '',  // 当前登录的用户id
            pwd_strength: null,  // 密码强度提示
            time_count: 3  // 倒计时
        };
    },
    methods: {
        // 初始化数据
        getData() {
            this.username = localStorage.getItem('auto_log_people');
            this.user_id = JSON.parse(localStorage.getItem(this.username)).user_id;
        },

        // 检查当前密码是否正确
        async validateCurrentPwd() {
            // 调用api接口验证密码
            const getData = await login(this.username, this.current_pwd); 
            if(getData.status === "200") {
                this.step = 2;
            } else {
                this.$message({
                    message: '当前密码错误',
                    type: 'error'
                });
            }
        },

        // 检查密码是否符合要求
        checkPasswordStrength(pwd) {
            let strength = { message: '', color: '' };
            const hasLowerCase = /[a-z]/.test(pwd);
            const hasUpperCase = /[A-Z]/.test(pwd);
            const hasDigit = /\d/.test(pwd);
            const isValid = pwd.length >= 8 && ((hasLowerCase && hasUpperCase) || (hasLowerCase && hasDigit) || (hasUpperCase && hasDigit));

            if (!isValid) {
                strength.message = '密码必须是8位以上并包含大小写字母和数字中的两种';
                strength.color = 'red';
            } else {
                strength.message = '密码符合要求';
                strength.color = 'green';
            }
            this.pwd_strength = strength;
        },

        // 修改密码
        async change_pwd() {
            const hasLowerCase = /[a-z]/.test(this.pwd_change);
            const hasUpperCase = /[A-Z]/.test(this.pwd_change);
            const hasDigit = /\d/.test(this.pwd_change);
            const isValid = this.pwd_change.length >= 8 && ((hasLowerCase && hasUpperCase) || (hasLowerCase && hasDigit) || (hasUpperCase && hasDigit));

            if (!isValid) {
                this.$message({
                    message: '密码必须是8位以上并包含大小写字母和数字中的两种',
                    type: 'warning'
                });
                return;
            }
            if (this.pwd_change !== this.confirm_pwd_change) {
                this.$message({
                    message: '两次输入的密码不一致',
                    type: 'warning'
                });
                return;
            }
            // 调用api接口修改密码
            const getData = await updateUserPassword(this.user_id, this.pwd_change);
            if (getData.status === 200) {
                this.step = 3;
                this.$nextTick(() => {
                    this.$refs.steps.setCurrent(2); // 确保设置 active 为 2，步骤显示为完成状态
                });
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                // 倒计时3秒的滚动效果
                setInterval(() => {
                    this.time_count--;
                }, 1000);
                // 3秒后自动跳转到登录页面，并且清除登录信息
                setTimeout(() => {
                    localStorage.removeItem('isLoggedIn');
                    localStorage.removeItem('loginTime');
                    localStorage.removeItem('auto_log_people');
                    this.$isLoggedIn = false;
                    this.$router.push({ name: 'login' });
                }, 3000);
            } else {
                this.pwd_change = '';
                this.confirm_pwd_change = '';
                this.$message({
                    message: getData.msg,
                    type: 'error'
                });
            }
        },

        // 返回主页
        back_main() {
            if (this.current_pwd !== "" || this.pwd_change !== "" || this.confirm_pwd_change !== "") {
                this.$confirm('有修改未保存，是否不保存直接退出?', '提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/main');
                }).catch(() => { });
            } else {
                this.$router.push('/main');
            }
        }
    },
    watch: {
        pwd_change(val) {
            this.checkPasswordStrength(val);
        }
    },
    mounted() {
        this.getData();
    }
}
</script>

<style>
#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.step-header {
    margin-bottom: 40px;
}

.account-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4vh;
}

.account-input {
    width: 80%;
    margin-bottom: 20px;
}

.account-button {
    width: 40%;
    margin-top: 30px;
}

#account_card_size {
    width: 75vw;
    max-width: 700px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 15px !important;
    text-align: center;
}

#background2 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("../assets/photo/login/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#account_back_button {
    width: 40%;
    margin-top: 20px;
}

.success-message {
    text-align: center;
    margin-top: 40px;
}

.success-message p {
    margin: 5px 0;
}

@media (max-width: 768px) {
    #account_card_size {
        width: 75vw;
        padding: 20px;
        max-width: 75vw;
    }

    .step-header {
        margin-bottom: 20px;
    }

    .account-line {
        margin-bottom: 2vh;
    }

    .account-input {
        width: 100%;
        margin-bottom: 10px;
    }

    .account-button {
        width: 100%;
        margin-top: 15px;
    }

    #account_back_button {
        width: 100%;
        margin-top: 10px;
    }

    .success-message {
        margin-top: 20px;
    }
}
</style>
